import XtxBread from "@/components/library/xtxBread";
import XtxBreadItem from "@/components/library/xtxBreadItem";
import HomeBanner from "@/views/Home/components/homeBanner";
import "./index.scss";
import { Fragment, useMemo } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import XtxMore from "@/components/library/xtxMore";
import GoodsItem from "./components/goodsItem";
import { useFindTopCategory } from "@/apis/category";
import "animate.css";
import { CSSTransition } from "react-transition-group";
function topCategory() {
  // 拿取二级分类下的所有分类
  const topCategory = useSelector((store: any) => store.category.list);
  const { id } = useParams();
  const subList = useFindTopCategory(id as string);
  const subCategory = useMemo<{ id: number; [Propsname: string]: any }>(() => {
    return topCategory.find((item: any) => item.id === id);
  }, [topCategory, id]);

  return (
    <div className="top-category">
      <div className="container">
        {/* 面包屑 */}
        <CSSTransition
          in={subCategory && subCategory.id ? true : false}
          timeout={300}
          unmountOnExit
          classNames="animate__animated animate__backInRight"
          style={{ animationDuration: "2s", animationDelay: "2s" }}
        >
          <XtxBread>
            <XtxBreadItem to={"/"}>首页</XtxBreadItem>
            <XtxBreadItem to={"/"}>
              {subCategory && subCategory.name}
            </XtxBreadItem>
          </XtxBread>
        </CSSTransition>
        {/* 轮播图 */}
        <HomeBanner />
        {/* 全部分类 */}
        <div className="sub-list">
          <h3>全部分类</h3>
          <ul>
            {subCategory &&
              subCategory.children.map((item: any) => (
                <li key={item.id}>
                  <a href="javascript:;">
                    <img src={item.picture} />
                    <p>{item.name}</p>
                  </a>
                </li>
              ))}
          </ul>
        </div>
        {/* 各个分类 */}
        {/* <!-- 分类关联商品 --> */}
        {subList.map((item) => (
          <Fragment key={item.id}>
            <div className="ref-goods" key={item.id}>
              <div className="head">
                <h3>- {item.name} -</h3>
                <p className="tag">{item.desc}</p>
                <XtxMore />
              </div>
              <div className="body">
                {item.goods.map((sub: any) => (
                  <Fragment key={sub.id}>
                    <GoodsItem goods={sub} />
                  </Fragment>
                ))}
              </div>
            </div>
          </Fragment>
        ))}
      </div>
    </div>
  );
}

export default topCategory;
